<template>
  <div class="form-widget-container">
    <el-form class="full-height-width widget-form" :label-position="labelPosition"
      :class="[customClass, layoutType + '-layout']" :size="size" :validate-on-rule-change="false">
      <template v-if="designer.widgetList.length === 0">
        <div class="no-widget-hint">{{ i18nt("designer.noWidgetHint") }}</div>
      </template>

      <div class="form-widget-canvas" :style="{ minHeight: canvasMinHeight }">
        <draggable :list="designer.widgetList" item-key="id"
          v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 300 }" tag="transition-group"
          :component-data="{ name: 'fade' }" handle=".drag-handler" @end="onDragEnd" @add="onDragAdd"
          @update="onDragUpdate" :move="checkMove">
          <template #item="{ element: widget, index }">
            <div class="transition-group-el">
              <!-- {{ widget }} -->
              <template v-if="'container' === widget.category">
                <component :is="getWidgetName(widget)" :widget="widget" :designer="designer" :key="widget.id"
                  :parent-list="designer.widgetList" :index-of-parent-list="index" :parent-widget="null" />
              </template>
              <template v-else>
                <component :is="getWidgetName(widget)" :field="widget" :designer="designer" :key="widget.id"
                  :parent-list="designer.widgetList" :index-of-parent-list="index" :parent-widget="null"
                  :design-state="true" />
              </template>
            </div>
          </template>
        </draggable>
      </div>
    </el-form>
    <!-- 表格或者明细表 -->
    <el-dialog v-model="dialogFormVisible" title="请输入行数和列数" width="30%">
      <el-form :model="form">
        <el-form-item label="行数" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="列数" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import "@/components/form-designer/form-widget/container-widget/index";
import FieldComponents from "@/components/form-designer/form-widget/field-widget/index";
import i18n from "@/utils/i18n";
import eventBus from "@/utils/event-bus";
export default {
  name: "VFormWidget",
  componentName: "VFormWidget",
  mixins: [i18n],
  components: {
    ...FieldComponents
  },
  props: {
    designer: Object,
    formConfig: Object,
    optionData: {
      //prop传入的选项数据
      type: Object,
      default: () => ({})
    },
    globalDsv: {
      type: Object,
      default: () => ({})
    }
  },
  provide () {
    return {
      refList: this.widgetRefList,
      getFormConfig: () =>
        this.formConfig /* 解决provide传递formConfig属性的响应式更新问题！！ */,
      getGlobalDsv: () => this.globalDsv, // 全局数据源变量
      globalOptionData: this.optionData,
      getOptionData: () => this.optionData,
      getReadMode: () => false,
      globalModel: {
        formModel: this.formModel
      },
      getSubFormFieldFlag: () => false,
      getSubFormName: () => "",
      getDSResultCache: () => this.dsResultCache
    };
  },
  inject: ["getDesignerConfig"],
  data () {
    return {
      formModel: {},
      widgetRefList: {},
      dsResultCache: {},
      dialogFormVisible: false,
      formLabelWidth: 120,
      form: {},
      newIndex: 0
    };
  },
  computed: {
    labelPosition () {
      if (
        !!this.designer.formConfig &&
        !!this.designer.formConfig.labelPosition
      ) {
        return this.designer.formConfig.labelPosition;
      }

      return "left";
    },

    size () {
      if (!!this.designer.formConfig && !!this.designer.formConfig.size) {
        return this.designer.formConfig.size;
      }

      return "default";
    },

    customClass () {
      return this.designer.formConfig.customClass || "";
    },

    layoutType () {
      return this.designer.getLayoutType();
    },

    canvasMinHeight () {
      return this.getDesignerConfig().logoHeader !== false
        ? "calc(100vh - 56px - 68px)"
        : "calc(100vh - 56px - 68px + 48px)";
    }
  },
  watch: {
    "designer.widgetList": {
      deep: true,
      handler (val, oldValue) {
        // console.log('%c [ oldValue ]-122', 'font-size:13px; background:pink; color:#bf2c9f;', oldValue)
        // console.log('%c [ val ]-122', 'font-size:13px; background:pink; color:#bf2c9f;', val)
        // console.log(val);
        //
      }
    },

    "designer.formConfig": {
      deep: true,
      handler (val) {
        //
      }
    }
  },
  created () {
    eventBus.$off('addTable');
    eventBus.$on('addTable', () => {
      this.dialogFormVisible = true
      this.$nextTick(() => {
        const newIndex = this.designer.widgetList.length - 1
        this.newIndex = newIndex
        this.designer.appendTableRow(this.designer.widgetList[newIndex]);
        this.designer.appendTableCol(this.designer.widgetList[newIndex]);
      });


    });
    //this.designer.initDesigner( !!this.getDesignerConfig().resetFormJson )  //此行代码已移动到form-designer，以便提前赋值formConfig！！
    this.designer.loadPresetCssCode(this.getDesignerConfig().presetCssCode);
  },
  mounted () {
    this.disableFirefoxDefaultDrop(); /* 禁用Firefox默认拖拽搜索功能!! */
    this.designer.registerFormWidget(this);
  },
  methods: {
    cancel () {
      this.designer.widgetList.splice(this.newIndex, 1)
      this.dialogFormVisible = false
    },
    getWidgetName (widget) {
      return widget.type + "-widget";
    },

    disableFirefoxDefaultDrop () {
      const isFirefox =
        navigator.userAgent.toLowerCase().indexOf("firefox") !== -1;
      if (isFirefox) {
        document.body.ondrop = function (event) {
          event.stopPropagation();
          event.preventDefault();
        };
      }
    },

    onDragEnd (evt) {
      // debugger
      console.log('drag end000', evt)
    },

    onDragAdd (evt) {
      const newIndex = evt.newIndex;
      // console.log('%c [ newIndex ]-206', 'font-size:13px; background:pink; color:#bf2c9f;', newIndex)
      this.newIndex = newIndex
      if (this.designer.widgetList[newIndex]) {
        // 如果新增是主表
        if (this.designer.widgetList[newIndex].type === 'table' || this.designer.widgetList[newIndex].type === 'sub-form') {
          this.dialogFormVisible = true
          for (let index = 0; index < 1; index++) {
            this.designer.appendTableRow(this.designer.widgetList[newIndex]);
          }
          for (let index = 0; index < 5; index++) {
            this.designer.appendTableCol(this.designer.widgetList[newIndex]);
          }
        }
        this.designer.setSelected(this.designer.widgetList[newIndex]);
      }

      this.designer.emitHistoryChange();
      this.designer.emitEvent("field-selected", null);
    },

    onDragUpdate () {
      // debugger
      /* 在VueDraggable内拖拽组件发生位置变化时会触发update，未发生组件位置变化不会触发！！ */
      this.designer.emitHistoryChange();
    },

    checkMove (evt) {
      return this.designer.checkWidgetMove(evt);
    },

    getFormData () {
      return this.formModel;
    },

    getWidgetRef (widgetName, showError = false) {
      const foundRef = this.widgetRefList[widgetName];
      if (!foundRef && !!showError) {
        this.$message.error(
          this.i18nt("designer.hint.refNotFound") + widgetName
        );
      }
      return foundRef;
    },

    getSelectedWidgetRef () {
      const wName = this.designer.selectedWidgetName;
      return this.getWidgetRef(wName);
    },

    clearWidgetRefList () {
      Object.keys(this.widgetRefList).forEach(key => {
        delete this.widgetRefList[key];
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container-scroll-bar {

  :deep(.el-scrollbar__wrap),
  :deep(.el-scrollbar__view) {
    overflow-x: hidden;
  }
}

.form-widget-container {
  padding: 10px;
  background: #f1f2f3;

  overflow-x: hidden;
  overflow-y: auto;

  .el-form.full-height-width {
    height: 100%;
    padding: 3px;
    background: #ffffff;

    .no-widget-hint {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 18px;
      color: #999999;
    }

    .form-widget-canvas {
      //min-height: calc(100vh - 56px - 68px + 48px);
      padding: 3px;
    }
  }

  /* 隐藏组件拖拽状态中显示的黑点 */
  :deep(li.container-widget-item),
  :deep(li.field-widget-item) {
    list-style: none;
  }

  .el-form.PC-layout {
    //
  }

  .el-form.Pad-layout {
    margin: 0 auto;
    max-width: 960px;
    border-radius: 15px;
    box-shadow: 0 0 1px 10px #495060;
  }

  .el-form.H5-layout {
    margin: 0 auto;
    width: 420px;
    border-radius: 15px;
    //border-width: 10px;
    box-shadow: 0 0 1px 10px #495060;
  }

  .el-form.widget-form :deep(.el-row) {
    padding: 2px;
    border: 1px dashed rgba(170, 170, 170, 0.75);
  }
}

.grid-cell {
  min-height: 30px;
  border-right: 1px dotted #cccccc;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
